<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
</head>
<body>
<div id="seek-img">
    <form id="formImg"  action="http://localhost:7888/tp/index.php?s=index/upload" method="post" enctype="multipart/form-data">
        <input type="file" id="userfile" name="file[]" class="filepath" multiple="multiple"/>
        <button type="submit">提交</button>
    </form>·
    <!--<button onclick="btn()">提交</button>-->

</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>
    document.getElementById("userfile").onchange = check;

    //判断图片·
    function check(e) {

        var aa = this.value.toLowerCase().split('.');//以“.”分隔上传文件字符串
        console.log(this.value);
        if (this.value == "") {
            alert('图片不能为空！');
            return false;
        }
        else {
            if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg' || aa[aa.length - 1] == 'bmp'
                || aa[aa.length - 1] == 'png' || aa[aa.length - 1] == 'jpeg')//判断图片格式
            {
                var imagSize = this.files[0].size;
                //   alert("图片大小："+imagSize+"B");
                if (imagSize < 1024 * 1024 * 3)
                // alert("图片大小在3M以内，为："+imagSize/(1024*1024)+"M");

                    /****
                     *
                     * 没有压缩base64
                     */
                    var file = this.files[0];
                //console.log(file);
                if (window.FileReader) {
                    var reader = new FileReader();
                    // console.log(reader);
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件
                    reader.onloadend = function (e) {
                        sessionStorage["base64"] = e.target.result//e.target.result就是最后的路径地址
                    };
                }

                /****
                 *
                 * 当前的页面图片路径
                 */
                function getObjectURL(file) {
                    var url = null;
                    if (window.createObjectURL != undefined) {
                        url = window.createObjectURL(file)
                    } else if (window.URL != undefined) {
                        url = window.URL.createObjectURL(file)
                    } else if (window.webkitURL != undefined) {
                        url = window.webkitURL.createObjectURL(file)
                    }
                    return url
                }

                var srcs = getObjectURL(this.files[0]);
                sessionStorage["srcs"] = srcs;//e.target.result就是最后的路径地址
                var htmlImg = `
                           <img style="width:20px;" src=${srcs} alt=""/>
                       `;
                $(this).parent().before(htmlImg);

                /****
                 * 图片压缩
                 * @param e
                 */
                var file = e.target.files[0];
                var reader = new FileReader();
                reader.onloadend = function () {
                    //  图片的 base64 格式, 可以直接当成 img 的 src 属性值
                    //压缩图片
                    var img = new Image();
                    img.onload = function () {
                        // 当图片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算
                        // 压缩质量可以根据实际情况调整
                        var w = Math.min(100, img.width);
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');

                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;

                        // 把图片绘制到 canvas 中
                        ctx.drawImage(img, 0, 0, w, h);

                        // 取出 base64 格式数据
                        var dataURL = canvas.toDataURL('image/png');
                        sessionStorage['dataURL'] = dataURL;
                    };

                    img.src = reader.result;
                };
                reader.readAsDataURL(file); // 读出 base64
                /***
                 * 图片压缩结束
                 */
                return true;
            }
            else {
                alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片');//jpg和jpeg格式是一样的只是系统Windows认jpg，Mac OS认jpeg，
                return false;
            }
        }
    }

    //base64转成2进制；
    function dataURItoBlob(dataURL) {
        var byteString = atob(dataURL.split(',')[1]);
        var mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: mimeString});
    }
// function btn() {
//     var blob = dataURItoBlob(sessionStorage['dataURL']);
// //                var form = new FormData(document.getElementById('rt'));
//     var form=new FormData();
//     form.append('file',blob);
//     $.ajax({type:"Post",
//         url:'http://192.168.1.22:8080/Test1/upload',
//
//         data:form,
//         dataType:"json",
//         processData:false,
//         contentType:false,
//         success:function(data){
//             conosle.log(data)
//         }
//     })
// }
</script>
</html>